<template>
  做一个传声筒
  <nf-text
    ref="refInput"
    v-bind="textProps"
    @clear="myclear"
  >
    <template #suffix>
      测试插槽
    </template>
  </nf-text>
  <el-button @click="set2">设置 reactive 的 name</el-button><br>
  <hr>
  reactive 的 name：{{retUser}}<br>
 
</template>

<script>
  import {ref, reactive, onMounted, nextTick } from 'vue'
  import { ElRow, ElCol, ElButton, ElInput } from 'element-plus'
  import { lifecycle } from '/nf-ui-core'
  import NfText from './components/my-text-props.vue'
  
</script>

<script setup>
  lifecycle('直接修改 model', true)

  const retUser = reactive({
    userName: '',
    address: '',
    age: 18,
    like: []
  })

  const textProps = reactive({
    title: '提示信息',
    model: retUser,
    colName: 'userName',
    maxLength: 10,
    placeholder: '占位信息',
    disabled: false,
    'suffix-icon': 'el-icon-date',
    events: {// 传递方法、事件等
      focus: () => {},
      myinput: (info) => {
        console.log('子控件触发了回调事件：', info)
      }
    }
  })

  const refInput = ref(null)

  onMounted(() => {
    console.log('父组件的input', refInput.value)
    refInput.value.focus()
  })

  const set2 = () => {
    retUser.userName = new Date().valueOf()
    textProps.events.focus()
  }

  const myclear = () => {
    console.log('父组件的清空事件----------')
  }
</script>